<template>
    <lay-card>
  
      <template v-slot:body>
        <lay-row>
          <lay-col>
            <lay-table :loading="config.loading" :columns="config.columns" :page="config.page" @change="change"
              :data-source="config.data" class="project-grids">
  
              <template #toolbar>
                <lay-input v-model="config.search.title" size="sm" placeholder="搜索" suffix-icon="layui-icon-search"
                  style="width: 20%;"></lay-input>
  
                <lay-button-group v-for="n in listbutton.toolbarbuttons" :key="n">
                  <lay-button :size="n.size" :type="n.status" border-style="dashed" @click="Events(n, null)"> {{ n.name
                  }}</lay-button>
                </lay-button-group>
              </template>
              <template v-slot:operator="{ row }">
                <span v-for="n in listbutton.rowbuttons" :key="n">
                  <lay-tooltip :content="n.name" position="bottom" :is-dark="true">
                    <button class="a-button type--button is--circle" circle @click="Events(n, row)">
                      <lay-icon :type="n.icon" :color="n.color">
  
                      </lay-icon>
                    </button>
                  </lay-tooltip>
  
                </span>
  
              </template>
              <template #status="{ row }">
                            <div>
                                {{ getstatus(row.isuse) }}
                            </div>
                           
                       </template>
            </lay-table>
          </lay-col>
  
  
        </lay-row>
      </template>
    </lay-card>
  </template>
  <script lang="ts">
  export default {
    name: "appset"
  }
  </script>
  <script lang="ts" setup>
  import { ref, nextTick } from "vue";
  import { layer } from "@layui/layer-vue";
  import webosutils from 'webosutils';
  import { useRoute } from 'vue-router';
  import { ReleaseIcon } from '@layui/icons-vue';
  import { useRouter } from 'vue-router';
  import listurils from '../../utils/listutils';
  import { LayerForm} from 'webos-form-design';
  const router = useRouter();
  const route = useRoute();
  const listbutton = ref({
    rowbuttons: [] as any,
    toolbarbuttons: [] as any,
  });
  const size = ref("sm");
  const config = ref({
    loading: true,
    data: [],
    page: {
      total: 0,
      limit: 10,
      current: 1,
      showRefresh: true,
      limits: [5,10,20,50,100,200]
    },
    columns: [
      // { key: 'checkbox', width: 50 },
      { type: 'checkbox', width: 50 },
      { key: 'title', title: '标题', ellipsisTooltip:true },
      { key: 'code', title: '编号', ellipsisTooltip:true },
       { key: 'isuse', title: '是否启用',customSlot: "status", },
      
      { key: 'value', title: '值', ellipsisTooltip:true },
      { key: 'other', title: '扩展' },
      { key: 'note', title: '备注', ellipsisTooltip:true },
      {
        title: "操作",
        width:"150px",
        fixed: "right",
        customSlot: "operator",
        key: "operator"
      }
    ],
    api: "",
    search: {
      id: route.query.parentid,
      title: ""
    }
  });
  const getstatus=(f:any)=>{
    f=f+"";
    switch (f){
        
        case '0':
            return '禁用';
        case '1':
            return '启用';
      
        default:
            return '未知';
    }
}
  listurils.getButton(route.query.appid, config, listbutton).then((res: any) => {
    //加载完成后刷新列表
  
    if (res.success) {
      config.value.api = res.data.api;
      if (listbutton.value.toolbarbuttons.length > 0) {
        size.value = listbutton.value.toolbarbuttons[0].size;
      }
      listurils.searchEvent(config);
    } else {
      layer.notify({
        title: "Error",
        content: res.msg,
        icon: 2
      })
    }
  
  });
  const change = (p: any) => {
  
    config.value.page.current = p.current;
    config.value.page.limit = p.limit;
    listurils.searchEvent(config);
  }
  const Callback=(res:any)=>{
    if (res.success) {
      layer.msg(res.msg);
      listurils.searchEvent(config);
    } else {
      layer.msg(res.msg);
    }
  }
  const Events = (ent: any, row: any) => {
    try {
  
      switch (ent.events) {
        case "editEvent":
          if (ent.ispopup == 0) {
            var query = new Object() as any;
            query.fromid = ent.formid;
            query.instanceid = row.instanceid;
            query.zhuanti = row.classid;
            query.tabname = encodeURIComponent(row.title);
            router.push({ path: "/formdesign/submitfrom", query: query, })
  
  
          } else {
            listurils.editRowEvent(LayerForm, ent, row, { fromid: ent.formid, instanceid: row.id, callback: Callback }, {});
  
          }
          break;
        case "searchEvent":
          if (config.value.page) {
            listurils.searchEvent(config);
          }
  
          break;
        case "deleteEvent": listurils.removeRowEvent(ent, row, listurils.searchEvent, config);
          break;
        case "addEvent":
          if (ent.ispopup == 0) {
            var query = new Object() as any;
            query.fromid = ent.formid;
            query.instanceid = "";
            query.zhuanti = route.query.parentid;
            query.tabname = encodeURIComponent(ent.title);
            router.push({ path: ent.api, query: query })
  
          } else {
            listurils.addEvent(LayerForm, ent, { fromid: ent.formid, instanceid: "", callback: Callback }, {parentid: route.query.parentid});
  
          }
          break;
  
        case "previewEvent": listurils.previewEvent(LayerForm, ent, row);
          break;
          case "cloneEvent": listurils.cloneRowEvent(LayerForm, ent, row, { fromid: ent.formid, instanceid: row.id, callback: Callback },  { id: "" });
          break;
      }
    } catch (e) {
      layer.msg("按钮解析失败", { icon: 3, time: 1000 })
    }
  
  }
  </script>
  <style scoped></style>
  
  